import { Tooltip } from 'antd'
import { Button } from '@/components/ui/button'
import { Minus, Square, X } from 'lucide-react'
import { useState } from 'react'

interface MenuBarProps {
  showMaximizeButton?: boolean
}

/**
 * 右上角的菜单按钮
 */
export function MenuBar(props: MenuBarProps) {
  const { showMaximizeButton = true } = props
  const [isWindowMax, setIsWindowMax] = useState(false)

  const minimizeWindow = () => window.CallBridge?.invokeMethod('MinimizeWindow')
  const toggleMaximizeWindow = () => {
    if (isWindowMax) {
      window.CallBridge?.invokeMethod('NormalWindow')
      setIsWindowMax(false)
    } else {
      window.CallBridge?.invokeMethod('MaximizeWindow')
      setIsWindowMax(true)
    }
  }
  const closeWindow = () => window.CallBridge?.invokeMethod('CloseWindow')

  return (
    <div className='z-50 fixed top-0 right-0'>
      <div className='flex items-center h-[3.25rem]'>
        <Tooltip title='最小化'>
          <Button
            variant='ghost'
            size='icon'
            className='size-[3.25rem] text-muted-foreground rounded-none'
            onClick={minimizeWindow}
          >
            <Minus className='size-5' strokeWidth={2.5} />
          </Button>
        </Tooltip>
        {showMaximizeButton && (
          <Tooltip title='最大化'>
            <Button
              variant='ghost'
              size='icon'
              className='size-[3.25rem] text-muted-foreground rounded-none'
              onClick={toggleMaximizeWindow}
            >
              <Square className='size-[0.95rem]' strokeWidth={3} />
            </Button>
          </Tooltip>
        )}
        <Tooltip title='关闭窗口'>
          <Button
            variant='ghost'
            size='icon'
            className='size-[3.25rem] text-muted-foreground rounded-none hover:bg-destructive hover:text-destructive-foreground'
            onClick={closeWindow}
          >
            <X className='size-5' strokeWidth={2.5} />
          </Button>
        </Tooltip>
      </div>
    </div>
  )
}
